前端入門，入門前端。學前端，如標題簡單。

嗨，大家好
昨天我們認識了與表格有關的標籤
今天讓我們繼續認識更多標籤吧

在開始之前讓我們先來完成一些置作業：
先在鐵人賽的資料夾底下建立一個資料夾day08 (之前建立檔案是選 New File，現在建立資料夾請選 New Folder)
點一下day08的資料夾，在裡面建立新的檔案(New File) day08-認識圖片標籤.html，在裡面放入一張照片(可以直接用滑鼠把照片拖曳進去)。
接著再鐵人賽底下建立一個pic資料夾，裡面也放入一張照片。

我們可以看到 day08-認識圖片標籤.html 與 image.jpg 兩個檔案有內縮(往右)就代表這兩個檔案在day08資料夾裡面。同理 image1.jpg 內縮在pic資料夾裡面。

前置作業完成，讓我們打開day08-認識圖片標籤.html開始吧

圖片標籤 <img>

圖片標籤用的是 <img> ，不需要結束標籤。
<img> 的使用方式是在裡面添加「屬性」，讓我們一一來認識。
src
圖片的位置，必填。(關於路徑下面會有詳細的說明)
src="image.jpg"

width
一個整數，指定圖片寬度像素 (pixels，影像顯示的基本單位)
width="300"

height
一個整數，指定圖片高度像素 (pixels，影像顯示的基本單位)
height="300"

alt
圖片替代文字 (alternate text)，當圖片無法顯示時，瀏覽器會顯示此文字。
建議都要加上此屬性，對於SEO會有幫助
alt="這是一隻草泥馬"

title
在當滑鼠滑過圖片時，會自動顯示這段文字。
title="我可愛嗎"

<img src="image.jpg" alt="這是一隻草泥馬" width="300" height="300" title="我可愛嗎">

我們就可以看到

如果圖片無法顯示，就會看到alt中的文字

絕對路徑與相對路徑

當我們要引入圖片(或檔案)時，會需要說明這張圖片要從哪裡引入，這就是圖片的路徑。
路徑又可以區分為絕對路徑與相對路徑。

不知道大家還有沒有印象，地理課在學座標的時候，我們會學絕對位置與相對位置。兩者是一樣的概念。
絕對位置就是直接明確的說在哪個位置，例如：
我家地址是，臺北市中正區重慶南路1段122號。
台灣位於，東經120度58分55.2886秒，北緯23度58分25.9486秒。
相對位置就是先以一個地方為基準，再說明位置，例如：
小明的家在小美家左邊第一棟。

絕對路徑與相對路徑，也是一樣的。

絕對路徑就是直接明確的說檔案在哪個位置，例如：
就在這個網址 https://example.com.tw/img/image.jpg
就在電腦的哪個資料夾里 file:///C:/Users/user/Desktop/鐵人賽/day08/image.jpg

相對路徑就是以某個檔案為基準去算出另一個檔案的位置，例如：
src="../photo/image.jpg"

再我們更深入了解之前，讓我們先簡單認識兩個專有名詞
1.目錄：就是資料夾
2.根目錄：最源頭的資料夾

讓我們一一認識他們吧

絕對路徑

絕對路徑會從根目錄開始算起(這裡就可以把最外面的鐵人賽資料夾當成根目錄)，把路徑一路寫出來就可以了
在寫路徑的時候用「/」代表分隔資料夾，第一個「/」會表示從根目錄開始，所以我們的 src="/day08/image.jpg"，代表根目錄開始，進去day08資料夾的image.jpg。

相對路徑 (同目錄)

如果我們要使用的圖片與目前檔案在同個目錄底下，可以用「./」代表同一個目錄底下的檔案。
src="./image.jpg"

相對路徑 (不同目錄)

如果我們現在要把照片換成在pic資料夾裡面的image1.jpg。

相對路徑會以現在我們的檔案 day08-認識圖片標籤.html 為基準的目錄開始算起。
用「../」代表退出去一層目錄。
我們現在在day08沒有辦法碰到pic(因為在同一層)，所以要往外退一層到鐵人賽的目錄(../)，才能再進入pic(/)，然後取到image1.jpg。
src="../pic/image1.jpg" (如果不小心算錯，多退或是少退一層目錄，這時候alt屬性就會發揮效果了)

當初在學相對路徑的時候覺得很困惑，為什麼day08與pic都在同一層，可是沒辦法直接進去，非得退出去一層呢？
其實可以把他想成跟計算血緣關係的幾等親一樣，兄弟之間是兩等親，必須通過上面的長輩，才能碰在一起。

這邊特別說明一下，如果平常在練習打程式碼，覺得要用真的照片很麻煩，來源可以使用假圖
src="https://picsum.photos/300/200/" (300與200代表寬高，可以依需求做調整)
src="https://fakeimg.pl/300x200/100"> (300與200代表寬高，100可以調顏色(還是對比之類的))

影片與音檔標籤 <video></video> <audio></audio>

影片標籤 <video></video> 與音檔標籤 <audio></audio> 可以讓我們在網頁中嵌入影片與音檔。
由於他們的使用方式與 <img> 類似，就請有興趣的朋友自行上網學習囉。

推薦大家兩個好用的網站
1.https://www.w3schools.com/ (w3school，進入之後，上面可以選擇程式語言)
2.https://developer.mozilla.org/zh-CN/ (mdn，進入之後，上面References->HTML)

稍微補充一個點就好， <video></video> 與 <audio></audio> 不同於 <img>是有結束標籤的。
他們沒有alt屬性，如果當影片或音檔沒有出現的時候想要有alt的功能，就把要顯示的文字寫在標籤裡。

<video>
    您的瀏覽器不支援此功能，想觀看影片請前往 
    <a href="還記得這裡要填什麼嗎，忘記了請看day06">觀看影片</a>
</video>

今天就這樣，我們明天見囉。